<!DOCTYPE html>
<html data-theme="light">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='lizard.png') }}">
    <title>LAN Clipboard</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div id="background"></div>
    <!-- 拖放区域 -->
    <div id="drop-zone" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999;">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px;">
            拖放文件到这里上传
        </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="icon-button" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
        <i class="fas fa-arrow-up"></i> 
    </button>

    <!-- 输入区域 -->
    <div class="input-form">
        <div class="input-container">
            <textarea id="input-text" name="text" placeholder="输入新文本\链接\粘贴图片\文件\Ctrl+Enter发送...
支持模板:F1 JS\CSS F2 IFRAME"></textarea>
            <div class="button-group">
                <button onclick="addCard()" id="add-btn" class="icon-button">
                    <i class="fas fa-plus"></i>
                </button>
                <button type="button" onclick="pasteClipboard()" class="icon-button">
                    <i class="fas fa-clipboard"></i>
                </button>
                <button id="theme-toggle" onclick="toggleTheme()" class="icon-button">
                    <i class="fas fa-moon dark-icon"></i>
                </button>
                <button onclick="window.location.href='/'" class="icon-button">
                    <i class="fas fa-refresh"></i>
                </button>
                <button onclick="clearHistory()" class="icon-button">
                    <i class="fas fa-trash"></i>
                </button>
                <button onclick="document.getElementById('file-input').click()" class="icon-button">
                    <i class="fas fa-image"></i>
                    <input type="file" id="file-input" style="display: none;" accept="image/*" multiple onchange="uploadImages(this.files); this.value='';">
                </button>
                <button onclick="document.getElementById('file-input2').click()" class="icon-button">
                    <i class="fas fa-file-upload"></i>
                    <input type="file" id="file-input2" style="display: none;" accept="*" multiple onchange="uploadFiles(this.files); this.value='';">
                </button>

            </div>
        </div>
    </div>

    <!-- 卡片展示区域 -->
    <div class="card">
    {% for card in cards|reverse %}
        <div class="card-wrapper">
            <div class="card-header">
                <button onclick="copyToClipboard(this)" class="icon-button raw-button download-button" title="复制到剪贴板" style="padding: 4px 8px; font-size: 12px;">
                    <i class="fas fa-copy"></i>
                    </button>
                <button onclick="showRawContent(this)" class="icon-button raw-button" title="查看原始内容" style="padding: 4px 8px; font-size: 12px;">
                    <i class="fas fa-code"></i>
                </button>
                <!-- downloadbtn -->
                <button onclick="downloadCard(this)" class="icon-button raw-button download-button" style="padding: 4px 8px; font-size: 12px;" title="下载">
                    <i class="fas fa-download"></i>
                </button>
                <button onclick="deleteCard(this)" class="icon-button raw-button delete-button" style="padding: 4px 8px; font-size: 12px;" title="删除">
                    <i class="fas fa-trash"></i>
                </button>

            </div>
            <pre class="card-content" >
{{ card | safe }}
            </pre>
        </div>
    {% endfor %}
    </div>

    <script src="{{ url_for('static', filename='main.js') }}"></script>
    <footer>
        <!-- 添加 GitHub 按钮 -->
        <a href="https://github.com/cornradio/LANwebclipboard-win-flask/" target="_blank" class="github-button">
            <i class="fab fa-github"></i>
        </a>
    </footer>
</body>

</html> 